<!DOCTYPE html>
<html style="height: 100%;width: 100%">
<head lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" />
    <link id="icon" rel="shortcut icon" href="../images/icon.png"/>
    <title>RECNEPS-KIPS</title>
    <script type="text/javascript" src="../JS/fullScreen.js"></script>

    <!--<script type="text/javascript" src="../JS/elementHandler.js"></script>-->

    <script type="text/javascript">
        function fullOnMouseDown(){
            requestFullScreen(document.getElementById("body"));
        }

        var dom = function(s){
            return document.getElementById(s)
        };
        dom.cssName = function (name){
            var prefixes = ['', '-ms-','-moz-', '-webkit-', '-khtml-', '-o-'],
                rcap = /-([a-z])/g,capFn = function($0,$1){
                    return $1.toUpperCase();
                };
            dom.cssName = function(name, target, test){
                target = target || document.documentElement.style;
                for (var i=0, l=prefixes.length; i < l; i++) {
                    test = (prefixes[i] + name).replace(rcap,capFn);
                    if(test in target){
                        return test;
                    }
                }
                return null;
            };
            return dom.cssName(name);
        };
        window.onload= function() {
            var e3 = dom("back"),
                css3transition = dom.cssName("transition");
            e3.style[css3transition] = "opacity 0.5s ease";

            var e4 = dom("full"),
                css3transition = dom.cssName("transition");
            e4.style[css3transition] = "opacity 0.5s ease";

            var e5 = dom("text"),
                css3transition = dom.cssName("transition");
            e5.style[css3transition] = "opacity 0.5s ease";

            setTimeout(function () {
                e3.style.opacity = "1";
                e4.style.opacity = "1";
                e5.style.opacity = "1";
            },500);
        }
        document.addEventListener('visibilitychange',function(){ //浏览器切换事件
            if(document.visibilityState=='hidden') { //状态判断
                //normal_title=document.title;
                document.title = '(●――●)喔呦,崩溃啦!';
                document.getElementById('icon').href='../images/leaveIcon.png';
            }else {
                document.title='(/≥▽≤)咦?又好了!';
                document.getElementById('icon').href='../images/icon.png';
                setTimeout(function () {
                    document.title = 'Hi,RECNEPS-KIPS';
                },2000)

            }
        });

    </script>

    <style>
        #back:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }


        @keyframes change1{

            from{opacity: 1}
            to{opacity: 0}
        }
        @keyframes change2 {
            from{opacity: 0}
            to{opacity: 1}
        }

        #full:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
        #st:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
        #qq:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
        #wechat:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
        #weibo:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }
        #ab:hover{
            animation:change1 0.2s ease ,change2 0.2s ease;
        }

        #back{
            color: #ffffff;
        }
        #full{
            color: #ffffff;
         }
        #text{
            color: #ffffff;
        }
        * {
            margin: 0;
            padding: 0;
        }
        .back {
            position:absolute;
            top:0;
            left:0;
            color: #ffffff;
        }
        .full{
            position:absolute;
            top:0;
            right:0;
            color: #ffffff;
        }
        .text{
            position:absolute;
            text-align: center;
            right: 0;
            left: 0;
            color: #ffffff;
        }
        .whole{
            height:100%;
        }
    </style>
</head>
<body id="body" style="height: 100%;width: 100%" >

<div id="out" style="background-color: #FFAFAF;cursor: auto; height: 100%;width: 100%">
        <div id="text" class="text" style="opacity: 0; cursor: auto; height: 100%;width: 100%; margin-top: 0px; font-size: 20px; font-family: sans-serif;">
            <p style="user-select: none;cursor: auto; font-size: 21px; margin-top:280px">R E C N E P S - K I P S</p>
            <p style= " margin-top:25px; font-size: 16px"><a href="start.html" id="st" style="color: #ffffff; border-bottom: 1px dashed #ffffff;user-select: none; text-decoration: none; height: 25px ; margin-right: 0;margin-left: 0">S T A R T</a></p>
            <p style="height: 5px; margin-top:7px;"><a id="ab" style="border-bottom: 1px dashed #ffffff; user-select: none;height: 25px ; margin-right: 0;font-size: 16px;margin-left:0">A&nbsp;B&nbsp;O&nbsp;U&nbsp;T</a></p>
            <p style="user-select: none;cursor: auto; height: 10px; margin-top:36px; font-size: 12px">&nbsp;&nbsp;&nbsp;&nbsp;*&nbsp;&nbsp;&nbsp;e n j o y&nbsp;&nbsp;&nbsp;i n&nbsp;&nbsp;&nbsp;t h e&nbsp;&nbsp;&nbsp;m u s i c&nbsp;&nbsp;&nbsp;a n d&nbsp;&nbsp;&nbsp;r h y t h m&nbsp;&nbsp;&nbsp;!&nbsp;&nbsp;&nbsp;&nbsp;</p>
            <p style="height: 5px; margin-top:35px;margin-left: 7px">
            <a id="sh" style="user-select: none; color: #ffffff; cursor: auto;font-size: 16px; height: 24px ; margin-right: 0;margin-left:0">S H A R E :</a></p>
            <p style="height: 0; margin-top:32px;margin-left:0">
                <img id="qq" src="../images/qq.png"  style="opacity: 0.9; user-select: none; height: 35px ; margin-right: 0;margin-left:0">
                <a></a>
                <img id="wechat" src="../images/wechat.png" style="opacity: 0.9;user-select: none;height: 35px ; margin-right: 0;margin-left:0">
                <img id="weibo" src="../images/weibo.png"   style="opacity: 0.9;user-select: none;height: 35px ; margin-right: 0;margin-left:0">
            </p>
        </div>
    <div id="back" class="back" style="opacity: 0; height: 20px;width: 20px;float: left; margin-left: 5px;margin-top: 5px; font-size: 20px; "><p><a style="user-select: none;height: 20px;width: 20px;" id="ba" onmousedown="history.go(-1)"><</a></p></div>
    <div id="full" class="full" onmousedown="fullOnMouseDown()" style="opacity: 0; height: 20px;width: 20px; float: right; margin-right: 5px;margin-top: 0px; font-size: 22px;" ><p><a id="fu">□</a></p></div>
    <!--主体-->
    <div id="cursor: auto; myself" class="whole" style="cursor: pointer;width: 100%; " ></div>
    </div>
</body>
</html>
